{% extends 'teacher/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Announcements
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-suitcase"></i>  <a href="/teaching">Teaching</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ course.title }}
                    </li>
                    <li class="active">
                        <i class="fa fa-home"></i> Home
                    </li>
                </ol>
            </div>
        </div>
        <!-- /.row -->

        <!-- Announcements -->
        <div id="ajax_announcements_table"
           name="ajax_announcements_table">
           {% include "teacher/announcement/table.html" %}
        </div>
        <!-- /.row -->

<!-- Modal -->
<div id="ajax_announcement_modal"
   name="ajax_announcement_modal"></div>
<!-- end modal -->

<script>
    function ajax_refresh_announcements_table()
    {
        $.ajax( 'announcements_table', {
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
            },
            type: 'post',
            success: function(result) {
                // success code execution here
                $('#ajax_announcements_table').html(result); // Update UI.
            },
            error: function(xhr,status,error) {
                // error code here
            },
            complete: function(xhr,status) {
                // completion code here
            }
        });
    }
    
    /**
     *  Function will call AJAX function to load the modal for the new course
     *  creation UI.
     */
    function ajax_announcement_modal(announcement_id)
    {
        if (announcement_id == 0)
        {
            $('#new_announcement_btn').prop("disabled", true); // Lock button
        }
        else
        {
            $('#edit_'+announcement_id+'_btn').prop("disabled", true); // Lock button
        }
        $.ajax( 'announcement_modal', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'announcement_id' : announcement_id
            },
            type: 'post',
            success: function(result) {
                // success code execution here
                $('#ajax_announcement_modal').html(result); // Update UI.
                $('#announcement_modal').modal();           // Unhide view.
            },
            error: function(xhr,status,error) {
                // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }

    /**
     *  Function will call AJAX function to delete the teacher's announcement.
     */
    function ajax_delete_announcement(announcement_id)
    {
        $('#del_'+announcement_id+'_btn').prop("disabled", true); // Lock button
        $.ajax( 'delete_announcement', {
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'announcement_id' : announcement_id
            },
            type: 'post',
            success: function(result) {
                // success code execution here
                if (result.status == 'success')
                {
                    $('#del_'+announcement_id+'_btn').prop("disabled", false); // Unlock button
                    ajax_refresh_announcements_table();
                }
            },
            error: function(xhr,status,error) {
                // error code here
            },
            complete: function(xhr,status) {
               // completion code here
            }
        });
    }
</script>

{% endblock content %}
